<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-30 00:09:51
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 20:16:23
 * @Description: 新闻
-->
<!--  -->
<template>
  <div id="news">
    <!-- 主题图片 -->
    <div id="banner" class="wow"></div>

    <!-- 导航标签 -->
    <div class="target_content">
      <div class="main-content">
        您的位置:
        <router-link to="/" class="target">首页</router-link>
        <i class="fa fa-angle-right"></i>
        <router-link to="/connectus" class="target" style="color: #0072d4"
          >联系我们</router-link
        >
      </div>
    </div>

    <!-- 新闻 -->
    <div
      class="main-content product-button title_button wow"
      ref="newsTags"
      style="text-align: left"
    >
      <a @click="choseTag(0)" class="active"><span>全部</span></a>
      <a @click="choseTag(1)" class=""><span>行业新闻</span></a>
      <a @click="choseTag(2)" class=""><span>公司新闻</span></a>
      <a @click="choseTag(3)" class=""><span>媒体关注</span></a>
    </div>

    <div class="main-content" id="news_box">
      <div
        class="card invisible wow"
        :style="{ animationDelay: index * 0.2 + 's' }"
        v-for="(item, index) of showNews"
        :key="index"
      >
       <a target="_blank" :href="'#detail?type=news&id=' + item.id" >
          <h2>{{ item.title }}</h2>
         </a>
        <div class="line"></div>
        <p>
          {{ item.content }}
        </p>
        <span>{{ item.date }}</span>
        <a target="_blank" :href="'#detail?type=news&id=' + item.id" class="more2" style="">
          <span> MORE </span>
          <i></i>
        </a>
      </div>
    </div>

    <!-- 分页 -->
    <div class="main-content" style="height: auto">
      <div class="pages">
        <a class="prev" @click="prev()">
          <i class="fa fa-angle-left"></i>
        </a>
        <a
          v-for="item in pages"
          :key="item"
          :class="item == 1 ? 'page_active page_item' : 'page_item'"
          @click="jumpBtn(item - 1)"
        >
          {{ item }}
        </a>
        <a class="next" @click="next()">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [],
      selectNews: [],
      showNews: [],
      pages: 1,
      selectPage: 0,
    };
  },
  components: {},
  mounted() {
    document.getElementsByTagName('title')[0].innerHTML = '云旅 | 新闻'

    this.$axios.get("/data.json").then((res) => {
      this.news = res.data.news;
      this.selectNews = this.news;
      this.pages = Math.ceil(this.selectNews.length / 6);
      this.showNews = this.selectNews.slice(0, 6);
    });
  },
  methods: {
    // 标签操作
    choseTag(index) {
      if (index < 0 || index > 3) return;
      if (index === 0) {
        this.selectNews = this.news;
      } else {
        this.selectNews = this.news.filter((item) => {
          return (
            item.tag == (index === 1 ? "行业新闻" : index === 2 ? "公司新闻" : "媒体关注")
          );
        });
      }
      this.pages = Math.ceil(this.selectNews.length / 6);
      this.showNews = this.selectNews.slice(0, 6);
      this.clearTagActive();
      this.addTagActive(index);
    },
    clearTagActive() {
      document.getElementsByClassName("active")[0].classList.remove("active");
    },
    addTagActive(index) {
      this.$refs.newsTags.childNodes[index].classList.add("active");
    },

    // 分页操作
    prev() {
      if (this.selectPage <= 0) return;
      this.selectPage--;
      this.jumpBtn(this.selectPage);
    },
    next() {
      if (this.selectPage >= this.pages - 1) return;
      this.selectPage++;
      this.jumpBtn(this.selectPage);
    },
    jumpBtn(index) {
      this.clearActive();
      this.selectPage = index;
      this.addActive(this.selectPage);
      let start = this.selectPage * 6;
      this.showNews = this.selectNews.slice(start, start + 6);
    },
    clearActive() {
      document.getElementsByClassName("page_active")[0].classList.remove("page_active");
    },
    addActive(index) {
      document.getElementsByClassName("page_item")[index].classList.add("page_active");
    },
  },
};
</script>

<style scoped>
@import "../assets/css/indexPage.css";

#banner {
  height: 400px;
  background-image: url("../assets/newsBg.jpg");
  background-position: center;
  user-select: none;
}
#news_box {
  justify-content: left;
}
#news_box .card {
  width: 360px;
}
</style>
